
<template>
  <!--    最外层layer1  左半部分 -->
  <div class="gepD4-layer1-left">

    <dv-border-box-11 backgroundColor="#123f43" :color="['#8ae1f4', '#194b50']" title="VEP项目核算结果"   >
      <div class="report">

        <!--        <h1 class="title">生态产品价值核算简报</h1>-->
        <p class="date">{{ formattedDate }}</p>
        <p class="summary">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="highlight">{{ vepName }}</span>项目的特定地域单元生态产品价值核算（VEP）核算结果为

          <span class="highlight">{{ (vepValue/10000).toFixed(2) }}亿元</span>。
          其中物质供给服务价值
          <span class="highlight">{{ outVepSupplyService.toFixed(2) }}万元</span>，约占生态产品价值的
          <span class="highlight">{{ (outVepSupplyService / vepValue * 100).toFixed(2) }}%</span>；
          生态调节服务价值
          <span class="highlight">{{ outVepRegulationService.toFixed(2) }}万元</span>，约占生态产品价值的
          <span class="highlight">{{ (outVepRegulationService / vepValue * 100).toFixed(2) }}%</span>；
          娱乐文化服务价值
          <span class="highlight">{{ outVepCulturalService.toFixed(2) }}万元</span>，约占生态产品价值的
          <span class="highlight">{{ (outVepCulturalService / vepValue * 100).toFixed(2) }}%</span>。
          各指标核算结果如下表所示：

        </p>

        <div class="table-content" style="margin-bottom: 10px;">
          <!-- 表格 -->
          <table border="1">
            <thead>
            <tr>
              <th rowspan="2">面积</th>
              <th rowspan="2">VEP</th>
              <th rowspan="2">物质供给</th>
              <th rowspan="2">调节服务</th>
              <th rowspan="2">文化服务</th>
            </tr>

            </thead>
            <tbody>
            <tr v-for="(item, index) in data" :key="index">
              <td>{{ typeof item.area === 'number' ? item.area.toFixed(2) : parseFloat(item.area).toFixed(2) }}平方公里</td>
              <td>{{ formatValue(parseFloat(item.vep.toFixed(2))) }}</td>
              <td>{{ formatValue(parseFloat(item.materialSupply.toFixed(2))) }}</td>
              <td>{{ formatValue(parseFloat(item.regulationService.toFixed(2))) }}</td>
              <td>{{ formatValue(parseFloat(item.culturalService.toFixed(2))) }}</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="button-container">
        <button  @click="vepExportToExcel" class="bg-green-800 text-white hover:bg-green-700  font-bold py-2 px-4 rounded inline-flex items-center">
          <svg class="w-6 h-6 mr-2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
          </svg>
          <span>下载</span>
        </button>
        <button  @click="backToVep" class="bg-green-800 text-white hover:bg-green-700  font-bold py-2 px-4 rounded inline-flex items-center">
          <svg class="w-6 h-6 mr-2 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 11.5 11 14l4-4m6 2a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
          </svg>
          <span>返回</span>
        </button>
      </div>
    </dv-border-box-11>

  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, computed, watch} from 'vue'
import {formatValue, vepExportToExcel} from "@/api/vepApi";
// 表单的数据
import {useVepDataStore,useVepCulturalServiceStore,useVepRegulationServiceStore,useVepSupplyServiceStore} from "@/stores/vep"
import {storeToRefs} from "pinia";

const vepSupplyServiceStore = useVepSupplyServiceStore();
const vepRegulationServiceStore = useVepRegulationServiceStore();
const vepCulturalServiceStore = useVepCulturalServiceStore();
const vepDataStore = useVepDataStore();

const {vepName,vepTown,vepValue} = storeToRefs(vepDataStore);

const {
  outVepSupplyService,
} = storeToRefs(vepSupplyServiceStore);
const {
  outVepRegulationService,
  inProjectLandArea,
} = storeToRefs(vepRegulationServiceStore);
const {
  outVepCulturalService,
} = storeToRefs(vepCulturalServiceStore);

// 获取当前日期
const currentDate = new Date();

// 格式化日期
const formattedDate = computed(() => {
  const year = currentDate.getFullYear();
  const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  const day = String(currentDate.getDate()).padStart(2, '0');
  return `${year}年${month}月${day}日`;
});


// 清空表单处理函数
function backToVep() {
  // 用刷新页面代替
  // window.location.reload();
  vepDataStore.reset(); // 调用重置方法
}

const data =  reactive([
  {
    area: (inProjectLandArea.value) ,
    vep: (vepValue.value) ,
    materialSupply:  (outVepSupplyService.value) ,
    regulationService: (outVepRegulationService.value) ,
    culturalService: (outVepCulturalService.value) ,

  },
  // 这里可以添加更多数据
])
</script>

<style scoped>


.button-container {
  margin: 10px 100px 10px 100px;
  padding-bottom: 20px;
  display: flex; /* 使用 Flexbox */
  flex-direction: row; /* 垂直排列 */
  justify-content: space-between;
  gap: 20px; /* 按钮间距 */

}

.gepD4FormOutput {
  width: 100%;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%; /* 设置父容器的高度 */
}


.report {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Arial', sans-serif; /* 字体 */
  font-size: 22px; /* 字体大小 */
  line-height: 1.2; /* 行高 */
  color: #ffffff; /* 字体颜色 */
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.date {
  text-align: center;
  font-size: 22px;
  margin-bottom: 20px;
  margin-top: 40px;

}

.summary {
  font-family: 'Arial', sans-serif; /* 字体 */
  font-size: 26px; /* 字体大小 */
  line-height: 1.5; /* 行高 */
  color: #ffffff; /* 字体颜色 */

  margin-bottom: 20px;
}
.highlight {
  font-weight: bold; /* 加粗 */
  color: #efcf3c; /* 高亮颜色，可以选择红色 */
  font-size: 26px; /* 字体大小 */
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}


/* .data-table th {
  background-color: #dcd7d7;
} */

table {
  width: 100%;
  border-collapse: collapse;
}



th {
  padding: 10px;
  text-align: center;
  background-color: rgba(191, 189, 189, 0.49);
  font-size: 22px;
  font-weight: bold;
}

td {
  padding: 10px;
  text-align: center;
  background-color: rgba(145, 149, 148, 0.71);
  font-size: 22px;

}
</style>
